<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-酒店详情</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/hotelDetail.css">
</head>
<body>

{include file="public/header" model='hotel' /}

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('Hotel/hotelList')}">酒店列表</a>
              <a><cite>{$hotel.hotel_name}</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="30" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
        </div>
    </div>
</div>

<style type="text/css">
    .ticket-need-konw{
        width: 79%;
        padding: 20px;
        background:
        #EDFFFB;
        border: 1px solid
        #E5E5E5;
        margin-bottom: 30px;
    }
</style>

<div class="tour-detail">
    <div class="layui-container">
        <div class="tour-detail-box tour-detail-top">
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-xs12">
                    <div class="tour-title">
                        <h1>{$hotel.hotel_name}</h1>

                        {eq name="is_select" value="0"}
                        <span id="toCollect" style="cursor: pointer;"><i class="layui-icon layui-icon-rate" style="font-size: 16px; color: #F2BF56;"></i>收藏</span>
                        {else/}
                        <span>已收藏</span>
                        {/eq}
                    </div>
                    <div class="tour-tags">
                        {foreach $hotel.hotel_tag as $k => $v}
                        <span>{$v}</span>
                        {/foreach}
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-xs12">

                    <div class="tour_tobuy_md  layui-hide-xs">
                        <div class="buy-button">
                            <a href="#toBuy">立即购买</a>
                        </div>
                        <p>已售{$hotel.sum_sale}</p>
                    </div>

                    <div class="tour_tobuy_xs  layui-hide-md">

                        <a href="javascript:;">前往app下单</a>
                        <span>已售{$hotel.sum_sale}</span>

                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space30">
                <div class="layui-col-md7 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md8  layui-col-xs12">
                            <div class="tour_l_img">
                                {notempty name="hotelImg[0]['img_path']"}
                                <img lay-src="{$hotelImg[0]['img_path']}" alt="">
                                {/notempty}
                            </div>
                        </div>
                        <div class="layui-col-md4  layui-col-xs12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="hotelImg[1]['img_path']"}
                                        <img lay-src="{$hotelImg[1]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="hotelImg[2]['img_path']"}
                                        <img lay-src="{$hotelImg[2]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5  layui-col-xs12">

                    <div class="open-time">
                        <i class="layui-icon layui-icon-cellphone" style="font-size: 18px; color: #20E6BA;"></i>&nbsp;
                        酒店电话：<span id="open_time">{$hotel.hotel_tel}</span>
                    </div>
                    <div class="tour-address">
                        <div class="tour-address-l">
                            <i class="layui-icon layui-icon-location" style="font-size: 18px; color: #20E6BA;"></i>
                            酒店地址：<span id="tour_address">{$hotel.address}</span>
                        </div>
                        <div class="tour-address-r">
                            <a href="#map">[ 查看地图 ]</a>
                        </div>
                    </div>
                    <div class="tour-rate">
                        <div class="tour-rate-top">
                            <div class="tour-rate-top-icon">
                                <i class="layui-icon layui-icon-face-smile"
                                   style="font-size: 18px; color: #FFAD6D;"></i>
                                &nbsp;
                                好评率{$hotel['rate']}%
                            </div>
                            <div class="tour-rate-top-a">
                                <a href="#comment">查看全部{$hotel.comment_count}条评论 ></a>
                            </div>
                        </div>

                        <div class="comment-content">
                            {$hotel.latests_comment.content}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-container ticket-box" id="toBuy">
        <div class="tour-detail-box tour-detail-midle">
            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">酒店房型</div>
                </div>
            </div>



            <div class="layui-row">
                <div class="ticket-detail" style="padding:30px 0;border: none;color: #757575;font-size: 12px;">
                    <div class="layui-col-md12">
                        <div class="layui-col-md2">房型名称</div>
                        <div class="layui-col-md2" style="display: flex;justify-content: center;">设施服务/预订须知</div>
                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">门市价</div>
                        </div>
                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">特惠价</div>
                        </div>

                        <div class="layui-col-md2">
                            <div style="display: flex;justify-content: center;">特惠</div>
                        </div>

                        <div class="layui-col-md2" style="display: flex;justify-content: center;">立即预定</div>
                    </div>
                </div>
                {foreach $hotelRoom as $k => $v}
                <div class="layui-col-md12">

                    <div class="ticket-detail">

                        <div class="layui-row">

                            <div class="layui-col-md2">
                                <div class="ticket-name">
                                    {$v.room_name}
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-tags"  style="display: flex;justify-content: center;">
                                    <a href="javascript:;" onclick="showBuyKnow({$v.room_id})">
                                        查看详情
                                        <i class="layui-icon layui-icon-triangle-d" style="font-size: 16px; color: #2D9FFF;"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="layui-col-md2">
                                <div class="ticket-price" style="display: flex;justify-content: center;">
                                    <sup>￥</sup>
                                    <del>
                                    {$v.room_price*1}
                                    </del>
                                </div>
                            </div>

                            <div class="layui-col-md2">
                                <div class="ticket-price" style="display: flex;justify-content: center;">
                                    <sup>￥</sup>
                                    {if $v.is_tehui == 1}
                                    {$v.room_discount_price*1}
                                    {else/}
                                    {$v.room_price*1}
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-is-discount" style="display: flex;justify-content: center;">
                                    {if $v.is_tehui == 1}
                                    <span>今日特惠</span>
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-btn-box" style="display: flex;justify-content: center;">

                                    <a href="javascript:;" onclick="toBuy({$v.room_id},'{$v.room_name}','{if $v.is_tehui == 1}{$v.room_discount_price}{else/}{$v.room_price}{/if}')">立即预定</a>
                                </div>
                            </div>

                        </div>

                        <div class="layui-row buy-should-know" style="display: none;" data-show="0" id="buy_should_konw_{$v.room_id}">

                            <div class="ticket-need-konw">

                                <div class="need_konw_title">酒店预订须知</div>
                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">预订说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">预订时间：</div>
                                        <div class="need_konw_group_li_r">随时可定</div>
                                    </div>

                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">有效期：</div>
                                        <div class="need_konw_group_li_r">选择的使用日期当天有效。</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">费用说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">费用包含：</div>
                                        <div class="need_konw_group_li_r">选择的房间种类、天数以及房间数。</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">使用方法</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">使用方法：</div>
                                        <div class="need_konw_group_li_r">到酒店前台处凭预定二维码或数字码核销后入住，按照实际人头数，一人一证，必须携带身份证入住。</div>
                                    </div>

                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">酒店地址：</div>
                                        <div class="need_konw_group_li_r">{$hotel.address}</div>
                                    </div>

                                     <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">入住时间：</div>
                                        <div class="need_konw_group_li_r">24小时</div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">退改说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">退改规则：</div>
                                        <div class="need_konw_group_li_r" style="line-height: 25px;">
                                        1，若为可取消订单则规定时间前申请取消订单并退款，若为不可取消订单则无法退款，退款按照原路径退回。<br>
                                        2，过期无效<br>
                                        3，使用日期过后经核实未使用系统将自动确认订单，无法退款。<br>
                                        4，订单不支持部分退。<br>
                                        5，如需改期，请申请取消后重新预订。<br>
                                    </div>
                                    </div>
                                </div>

                                <div class="need_konw_group">
                                    <div class="need_konw_group_title">其他说明</div>
                                    <div class="need_konw_group_li">
                                        <div class="need_konw_group_li_l">发票说明：</div>
                                        <div class="need_konw_group_li_r">如需发票，请在入住结束后在酒店前台处开取，本平台不做发票开取工作。</div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>
                {/foreach}
            </div>

        </div>
    </div>


    <div class="layui-container ticket-info">
        <div class="tour-detail-box tour-detail-midle">

            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">酒店简介</div>
                </div>
                <div class="layui-col-md1">
                    <a href="#map"><div class="target-s target-s-no">地图指南</div></a>
                </div>
                <div class="layui-col-md1">
                    <a href="#comment"><div class="target-s target-s-no">用户评价</div></a>
                </div>
            </div>


            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        景点简介
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content">
                        <p>“人人那个都说哎沂蒙山好，沂蒙哪个山上哎好风光，青山那个绿水哎多好看……”在革命战争年代，陈毅、罗荣桓、徐向前等老一辈革命家曾指挥过战斗，用乳汁救伤员的红嫂的故乡沂水县，惊现一处神奇的地下奇观——山东地下大峡谷，为古老的沂蒙大地又增添了一处旅游胜景。</p>
                        <p>山东地下大峡谷旅游区位于山东省沂水县，是一座风貌奇特的溶洞王国，是“沂蒙地下地质奇观核心景区”、“全省重点探险项目”、“山东十大最受欢迎旅游景区之一”、 “山东十大最美的地方”、“中国十大漂流胜地”、“国家地质公园”、国家AAAA级旅游区。</p>
                        <p>洞穴沿290-320度方向延伸，由一条西北/东南走向的巨大喀斯特裂隙发育而成，形成于约0.65亿年至2.3亿年前。</p>
                        <p>洞体长度6100米，目前已开发3100米。洞内分九大景段，有“一河”、“九泉”、“九宫”、“十二瀑”、“十二峡”等景观一百余处。</p>
                        <p>地下大峡谷漂流被上海大世界基尼斯记录总部认证为“中国最长溶洞漂流”。该旅游区是集休闲、游憩、娱乐、度假、溶洞漂流为一体的旅 游项目。</p>
                        <p>集团在地下大峡谷旅游区利用暗河水势开发的漂流项目，及其巧妙地挖掘了溶洞的资源优势，是地下地质奇观溶洞旅游品牌升级的创举。</p>
                        <p>它长1000米，充分体现了溶洞内的幽深莫测，起伏高下，惊险刺激，波激浪涌，抑扬顿挫，激情洋溢，无危险性，将地下河漂流的原生野始演绎的淋漓尽致，迎合了游客的消费需求，已深得游客们的信赖与喜爱，树立了“中国地下河漂流第一洞”的市场品牌，并得到上海大世界基尼斯记录总部的认证。</p>
                        <p>山东地下大峡谷旅游区的全天候管轨电动滑道车是全国最长的环保游览项目之一，该项目属国内领先技术。</p>
                        <p>管轨电动滑道车从地下大峡谷旅游区龙岗山顶龙翔阁前出发，沿山势而下，直达地下大峡谷入洞口。</p>
                        <p>全长2800米，落差50余米，轨道设计建设蜿蜒曲折，似蛟龙腾飞，如长虹卧波，十分壮观，滑道车车体长，车身宽、操纵杆操作，安全刹车装置，游客可自行控制车速，设计车速可达15公里/小时，乘坐舒适，安全可靠，惊险刺激。</p>
                        <p>游客乘坐该管轨车，不仅可免去步行的疲劳，节省游览时间，亦可俯视地下大峡谷全景，一路欣赏沿途田园风光，近察远观、悠然自得，感受前所未有的动感体验。</p>
                        <p>管轨电动滑道车操作简易，动感十足，是一项极具趣味性的观光旅游项目。</p>
                    </div>

                </div>

            </div>

            <div class="layui-row ticket-discript" id="map">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        地图指南
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="map_content" style="width: 100%;height:400px"></div>

                </div>

            </div>

            <div class="layui-row ticket-discript" id="comment">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        用户评价
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="ticket-discript-content">


                    </div>

                    <div id="comment-page"></div>

                </div>

            </div>

        </div>

    </div>

</div>


{include file="public/footer"  /}

<style type="text/css">
    .toBuyModal{
        display: none;
        padding: 20px;
    } 
    .modal_main{
        display: flex;
        justify-content: space-between;
        width:740px;
    } 

    .selectDate{
        width: 400px;
    }
    .theBuyTicketNmme{
        width: 300px;
        padding-top: 20px;
        color: #333333;
        font-size: 16px;
    }

    #selectDate .layui-laydate-main{width:400px;}
    #selectDate .layui-laydate-content td,#test-n1 .layui-laydate-content th{width:87px;height: 50px;}

    #selectDate .layui-laydate .layui-this {
        background-color: #20E6BA !important;
        color:#fff !important;
    }

    .selectNum{
        display: flex;
        justify-content: flex-start;
        height: 80px;
        align-items: center;
    }

    .buyButton{
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .buyButtonLeft{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        background: #F5F5F5;
        color: #FF4C4C;
    }

    .buyButtonLeft span{
        font-size: 16px;
        font-weight: bold;
    }

    .toBuyRight{
        position: relative;
    }

    .toBuyButtonBox{
        width: 100%;
        position:absolute;
        bottom: 30px;
        left: 0;
    }

    .buyButtonRight{
        width: 50%;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #20E6BA;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }
</style>
<div class="toBuyModal" id="toBuyModal">

    <div class="modal_main">
        <div class="toBuyLeft">
            <div class="selectDate" id="selectDate"></div>
        </div>
        <div class="toBuyRight">
            <div class="theBuyTicketNmme" id="theBuyTicketNmme"></div>

            <div class="toBuyButtonBox">
                <div class="selectNum">
                    <p>数量：</p>
                    <input name="js_num" id="alignment" class="alignment" data-step="1" data-min="1" data-max="100" data-digit="0" value="1"/>
                    <input type="hidden" id="theBuyTicketId" name="">
                    <input type="hidden" id="theBuyPrice" name="">
                    <input type="hidden" id="theBuyTime" name="">
                </div>

                <div class="buyButton">
                    <div class="buyButtonLeft">
                        价格：￥ <span id="toBuyPrice">100</span>
                    </div>
                    <div class="buyButtonRight" id="goBuyPage">
                        立即预定
                    </div>
                </div>
            </div>
        </div>
    </div>   
</div>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/index/vendor/js/calendar-pro.js"></script>
<script type="text/javascript" src="/static/index/js/num-alignment.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=358e193808b3b90caecc22bb5dfd23b8"></script>
<script>
    //一般直接写在一个js文件中
     var $ = layui.jquery;
        var layer = layui.layer
            , element = layui.element
            , carousel = layui.carousel
            , flow = layui.flow
            , laypage = layui.laypage
            , laydate = layui.laydate
            , form = layui.form;

        flow.lazyimg();

        form.render();
        element.init();

        window.showBuyKnow = function(id){

            $('.buy-should-know').hide();


            var showId = '#buy_should_konw_' + id;

            var is_show = $(showId).attr('data-show');

            if (is_show == 1){
                $(showId).attr('data-show',0);
                $(showId).hide();

            }else{
                $(showId).attr('data-show',1);
                $(showId).fadeIn();

            }

        }

        var uid = '{$Think.session.uid}';
        function toBuy(id,ticket_name,price){

            if (!uid) {
                layer.msg('请先登录',{time:1000});
                return false;
            }

            $('#theBuyTicketId').val(id);
            $('#theBuyTicketNmme').html(ticket_name);
            $('.alignment').val(1);
            $('#theBuyPrice').val(price*1);
            $('#toBuyPrice').html(price*1);
            layer.open({
                     title: false
                    , type: 1
                    , shadeClose: true
                    , area:['780px']
                    , content: $('#toBuyModal')
                    ,success:function(){
                
                        // 初始化
                        alignmentFns.initialize();

                        $('#alignment').on('change',function(){
                            //获取购买数量
                            var js_num = $('.alignment').val();
                            var price = $('#theBuyPrice').val();

                            $('#toBuyPrice').html(price*js_num);
                    
                        });
                
                    }
                    , end:function(){
                        // 销毁
                        alignmentFns.destroy();
                        $('#toBuyModal').hide();
                    }
                });

        }

        //年选择器
        laydate.render({ 
           elem: '#selectDate'
          ,show: true
          ,position:'static'
          ,showBottom:false
          ,min:0
          ,ready: function(date){

            var theMonth = date.month;
            var theDate  = date.date;
            if (date.month < 10) {
                theMonth = '0' + theMonth;
            }

            if (theDate < 10) {
                theDate = '0' + theDate;
            }

            var theNowDay = date.year + '-' + theMonth + '-' + theDate;

            $('#theBuyTime').val(theNowDay);
          }

         ,change: function(value, date, endDate){
            $('#theBuyTime').val(value);
          }
        });

         $('#goBuyPage').click(function(){
            var rid = $('#theBuyTicketId').val();
            var date = $('#theBuyTime').val();
            var num = $('#alignment').val();
            window.location.href="{:url('createOrder')}?rid="+rid+'&date=' + date + '&num=' + num;
        });


        var map = new AMap.Map('map_content', {
            zoom:11,//级别
            scrollWheel: false,
            center: [{$hotel.longitude},{$hotel.latitude}],//中心点坐标
            viewMode:'3D'//使用3D视图
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat({$hotel.longitude},{$hotel.latitude}),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '{$hotel.hotel_name}'
        });

        map.plugin(["AMap.ControlBar"],function(){
            var controlBar = new AMap.ControlBar({showZoomBar:true})
            map.addControl(controlBar)
        });

        map.add(marker);

        var uid = "{$Think.session.uid}";
        var other_id = "{$hotel.hotel_id}";
        $('#toCollect').click(function(){

            if (!uid) {
                layer.msg('请先登录',{time:1000});
                return false;
            }

            $.ajax({
                    type: "post",
                    url: "{:url('Collect/addCollection')}",
                    dataType: 'json',
                    data: {user_id:uid,other_id:other_id,type:2},

                    success:function(res){
                        if (res.code == 200) {
                            console.log(res.code);
                            layer.msg(res.msg,{time:1000},function(){
                                $('#toCollect').html('已收藏');
                                $('#toCollect').css('cursor','');
                                $('#toCollect').attr('id','');
                                
                            });
                        
                        }else{
                            layer.msg(res.msg,{time:1000});
                        }

                    }
                });

        });

        //执行一个laypage实例
        laypage.render({
                elem: 'comment-page' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: {$hotel.comment_count} //数据总数，从服务端得到
                ,prev:'<i class="layui-icon layui-icon-left"></i>'
                ,next:'<i class="layui-icon layui-icon-right"></i>'
                ,limit:5
                ,jump: function(obj, first){
                $.ajax({
                    type: "post",
                    url: "{:url('hotel/getComment')}",
                    data: {page:obj.curr,tour_id:{$hotel.hotel_id}},
                    success:function(data){
                    var system_str = '';
                    $.each(data.data,function(k,v){

                        system_str += '<div class="ticket-comment-li">';
                        system_str += '<div class="ticket-comment-user">';
                        system_str += '<div class="ticket-comment-user-l">';
                        system_str += '<div class="comment-user-img">';
                        system_str += '<img src="'+ v.user_icon +'" alt="">';
                        system_str += '</div>';
                        system_str += '<div class="comment-user-name">';
                        system_str += v.nickname;
                        system_str += '</div>';
                        system_str += '<div class="comment-user-tag">';

                        if (v.eval_status == 1){
                            system_str += '<span>好评</span>';
                        } else {
                            system_str += '<span>差评</span>';
                        }

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '<div class="ticket-comment-user-r">';
                        system_str += v.create_time;
                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '<div class="ticket-comment-content">';
                        system_str += v.content;
                        system_str += '</div>';

                        system_str += '<div class="ticket-comment-img">';
                        system_str += '<div class="layui-row layui-col-space20">';

                        for(i = 0;i < v.images.length;i++){

                            system_str += '<div class="layui-col-md4">';
                            system_str += '<div class="comment-img">';
                            system_str += '<img src="'+v.images[i]+'" alt="">';
                            system_str += '</div>';
                            system_str += '</div>';

                        }

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '</div>';


                });

                $('#ticket-discript-content').html(system_str);

            }
        });
        }
    });
</script>
</body>
</html>